// stylelint-disable selector-class-pattern

/* 试题 */
$question-select-color: #218fff !default; // 选中背景色
$question-right-color: #4ebd65 !default; // 正确背景色
$question-wrong-color: #f0595f !default; // 错误背景色

// ========= 试题主容器 =========
.tw-question {
  position: relative;
  margin-bottom: $spacing-small;
  counter-reset: blank;
}

// 试题: 题干
.tw-question-title {
  margin-bottom: $spacing-tiny;
}

.tw-question-title .van-checkbox {
  position: relative;
  padding-right: 7px;
  margin-right: 0;
  overflow: visible;
}

.tw-question-title-selbox {
  position: absolute;
  top: -.3rem;
  left: 0;
  width: 1rem;
  height: 1rem;
}

// 试题：题号
.tw-question-no {
  margin-right: $spacing-step;
  font-style: normal;
}

// 试题：难度
.tw-question-degree {
  display: inline-block;
  line-height: 18px;
  padding: 0 $spacing-step;
  margin-right: $spacing-step;
  font-style: normal;
  color: $color-main;
  vertical-align: middle;
  border: 1px solid $color-main;
  border-radius: 3px;
}

// 试题: 题型
.tw-question-type {
  font-style: normal;
}

// 试题: 分数
.tw-question-score {
  font-style: normal;
}

// 试题：填空题空白区
.tw-question-bpline {
  display: inline-block;
  min-width: 30px;
  margin-left: $spacing-step;
  text-align: center;
  border-bottom: .5px solid #999;

  &:after {
    content: counter(blank);
    display: inline-block;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 2px;
    font-size: 12px;
    font-style: normal;
    color: $color-text-weaking;
    counter-increment: blank;
    border: 1px solid #999;
    border-radius: 8px;
    transform: scale(.8);
    transform-origin: center bottom;
  }
}

// ========= 试题：选择题-选项容器 =========
.tw-question-opts {
  margin-bottom: $spacing-medium;
}

// 试题：选择题-选项
.tw-question-optitem {
  display: flex;
  border: 1px solid #cbd8e4;
}

// 试题：选择题-选项间距
.tw-question-optitem + .tw-question-optitem {
  margin-top: $spacing-small;
}

// 试题：选择题-选项号
.tw-question-optitem-no {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  background: #c9d7e3;
}

.tw-question-optitem-no > em {
  font-style: normal;
}

// 试题：选择题-选项内容
.tw-question-optitem-content {
  padding: 10px $spacing-step;
  color: $color-text-secondary;
}

// 试题：选择题-选项号-选中
.tw-question-optitem.xselected {
  border-color: $question-select-color;
}

.tw-question-optitem.xselected > .tw-question-optitem-no {
  background: $question-select-color;
}

// 试题：选择题-选项号-正确
.tw-question-optitem.xright {
  border-color: $question-right-color;
}

.tw-question-optitem.xright > .tw-question-optitem-no {
  background: $question-right-color;
}

// 试题：选择题-选项号-错误
.tw-question-optitem.xwrong {
  border-color: $question-wrong-color;
}

.tw-question-optitem.xwrong > .tw-question-optitem-no {
  background: $question-wrong-color;
}

// 试题：选择题-普通模式
.tw-question-opts.xnormal > .tw-question-optitem {
  border: none;
}

// 试题：选择题-普通模式-选项间距
.tw-question-opts.xnormal > .tw-question-optitem + .tw-question-optitem {
  margin-top: $spacing-step;
  border: none;
}

// 试题：选择题-普通模式-选项号样式
.tw-question-opts.xnormal .tw-question-optitem-no {
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  font-size: $font-size-default;
  color: $color-text-secondary;
  background: transparent;

  &:after {
    content: ".";
  }
}

// 试题：选择题-普通模式-选项内容
.tw-question-opts.xnormal .tw-question-optitem-content {
  padding: 0 $spacing-step;
}

// ========= 试题：填空题-填空项列表 =========
.tw-question-blanks {
  margin-bottom: $spacing-small;
}

.tw-question-analysis-content .tw-question-blanks {
  margin-bottom: 0;
}

//  试题：填空题-填空项
.tw-question-blanks-item {
  display: flex;
  align-items: center;
}

.tw-question-blanks-item + .tw-question-blanks-item {
  margin-top: $spacing-tiny;
}

.tw-question-blanks-item.xstd .van-cell {
  background: transparent;
}

.tw-question-blanks-item .van-cell::after {
  display: none;
}

// 试题：填空题-答案输入框
.tw-question-blankitem-input {
  flex: 1;
  border-bottom: 1px solid #eee;
}

.tw-question-blankitem-input.xshortanswer {
  border: 1px solid #eee;
}

.tw-question-blankitem-input.xshoranswer {
  border: 1px solid #eee;
}

.tw-question-blankitem-input > .van-field {
  border: none;
}

.tw-question-blankitem-input.xcorrecting {
  margin-right: $spacing-tiny;
}

.tw-question-blanks-item.xstd > .tw-question-blankitem-input {
  border-bottom-color: #ddd;
}

.tw-question-blanks-item.xstd > .tw-question-blankitem-input.xshoranswer {
  border: none;
}

// 试题：填空题-批改输入框
.tw-question-blankitem-correct {
  width: 0;
  overflow: hidden;
  transition: all $time linear;
}

.tw-question-blankitem-input.xcorrecting + .tw-question-blankitem-correct {
  width: 6.5em;
}

.tw-question-blankitem-correct .van-field__control {
  font-size: $font-size-default;
  text-align: center;
}

// 试题：填空题-填空项-正确
.tw-question-blankitem-input.xright {
  border-bottom-color: $question-right-color;
}

.tw-question-blankitem-input.xshortanswer.xright {
  border: 1px solid $question-right-color;
}

.tw-question-blankitem-input.xright .van-field__control {
  color: $question-right-color;
}

// 试题：填空题-填空项-错误
.tw-question-blankitem-input.xwrong {
  border-bottom-color: $question-wrong-color;
}

.tw-question-blankitem-input.xshortanswer.xwrong {
  border: 1px solid $question-wrong-color;
}

.tw-question-blankitem-input.xwrong .van-field__control {
  color: $question-wrong-color;
}

// ========= 试题：工具栏 =========
.tw-qeustion-toolbar {
  display: flex;
  line-height: 30px;
  margin-bottom: $spacing-step;
  border-radius: $border-radius;
}

// 试题：工具栏左半部份
.tw-question-toolbar-left {
  flex: 1;
}

// 试题：工具栏右半部份
.tw-question-toolbar-right {
  margin-left: $spacing-medium;
  text-align: right;
}

// 试题：工具栏-切换按钮
.tw-question-toolbar-togglebtn {
  color: $color-text-secondary;

  &:after {
    content: "";
    position: relative;
    top: 3px;
    left: 3px;
    color: $color-text-weaking;
    @include triangle(down, 5px);
  }
}

.tw-question-toolbar-togglebtn.xopen:after {
  top: -3px;
  transform: rotate(-180deg);
}

// ========= 试题：解析 =========
// 试题：解析
.tw-question-analysis {
  position: relative;
  padding: $spacing-tiny;
  background: #f5f5f5;
}

// 试题：解析项
.tw-question-analysis > li {
  display: flex;
}

// 试题：解析项-为填空填的容器时渲染为块级元素
.tw-question-analysis > li.xjoinline {
  display: block;
}

.tw-question-analysis > li.xjoinline .tw-question-joinline {
  margin: -$spacing-tiny (-$spacing-small);
}

.tw-question-analysis > li + li {
  margin-top: $spacing-step;
}

// 试题：解析项-名称
.tw-question-analysis-label {
  min-width: 35px;
  color: $color-text-secondary;
}

.tw-question-analysis-label.x3em {
  min-width: 50px;
}

.tw-question-analysis-label.xautowrap {
  flex-shrink:100;
}

// 试题：解析项-内容
.tw-question-analysis-content {
  flex: 1;
  padding-left: $spacing-step;
}

// 试题: 批改按钮
.tw-question-correctbtn {
  color: $color-main;
}

.tw-question-correctbtn.xtr {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  line-height: 30px;
  text-align: center;
}

.tw-question-correctbtn.xconfirm {
  width: 70px;
}

.tw-question-correctbtn.xcancel {
  right: 70px;
}

// ========= 试题内容区 =========
// 试题内容区: 表格
%question-html table {
  width: 100%;
  margin: $spacing-tiny 0;
  table-layout: fixed;
  border-collapse: collapse;
}

%question-html table th,
%question-html table td {
  height: 30px;
  padding: $spacing-step $spacing-tiny;
  font-weight: 400;
  border: 1px solid $color-border-secondary;
}

%question-html table th {
  background: #edf2f7;
}

// 试题内容区: 图片
%question-html img {
  max-width: 100%;
  cursor: pointer;
}

.tw-question-title-content,
.tw-question-optitem-content,
.tw-question-analysis-content {
  @extend %question-html;
}

// ========= 答题附件上传区 =========
.tw-nuploader.xquestion {
  margin: 0 (-$spacing-step) $spacing-small;
}

// ========= 统计详情 =========
.tw-question-analysis-statistic-detail {
  font-size: $font-size-small;
  white-space: nowrap;
}